<template>
  <div class="player" v-show="playList.length > 0">
    <!-- 全屏播放器 -->
    <transition name="normal" @enter="enter" @after-enter="afterEnter" @leave="leave" @after-leave="afterLeave">
      <div class="normal-player" v-show="fullScreen">
        <!-- 背景图 -->
        <div class="background">
          <img width="100%" height="100%" :src="currentSong.image" alt="">
        </div>
        <!-- 头部 -->
        <div class="top">
          <div @click="back" class="back">
            <i class="icon-back"></i>
          </div>
          <h1 class="title">{{currentSong.name}}</h1>
          <h2 class="subtitle">{{currentSong.singer}}</h2>
        </div>
        <!-- 中间部分 -->
        <div class="middle">
          <div class="middle-l">
            <div ref="cdWrapper" class="cd-wrapper">
              <div class="cd">
                <img class="image" :src="currentSong.image" alt="">
              </div>
            </div>
          </div>
        </div>
        <!-- 底部 -->
        <div class="bottom">
          <div class="operators">
            <!-- 序列/随机播放按钮 -->
            <div class="icon i-left">
              <i class="icon-sequence"></i>
            </div>
            <!-- 前一首 -->
            <div class="icon i-left">
              <i class="icon-prev"></i>
            </div>
            <!-- 播放按钮 -->
            <div class="icon i-center">
              <i class="icon-play"></i>
            </div>
            <!-- 后一首 -->
            <div class="icon i-right">
              <i class="icon-next"></i>
            </div>
            <!-- 收藏 -->
            <div class="icon i-right">
              <i class="icon-not-favorite"></i>
            </div>
          </div>
        </div>
      </div>
    </transition>

    <!-- mini播放器 -->
    <transition name="mini">
      <div @click="open" class="mini-player" v-show="!fullScreen">
        <!-- 专辑图片 -->
        <div class="icon">
          <img width="40" height="40" :src="currentSong.image" alt="">
        </div>
        <!-- 歌曲名和歌手 -->
        <div class="text">
          <h2 class="name">{{currentSong.name}}</h2>
          <p class="desc">{{currentSong.singer}}</p>
        </div>
        <!-- 播放控制按钮 -->
        <div class="control"></div>
        <!-- 播放列表 -->
        <div class="control">
          <i class="icon-playlist"></i>
        </div>
      </div>
    </transition>

  </div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
import animations from "create-keyframe-animation";

import {prefixStyle} from 'common/js/dom'
const transform = prefixStyle('transform')

export default {
  computed: {
    ...mapGetters(["playList", "fullScreen", "currentSong"])
  },
  methods: {
    ...mapMutations({
      setFullScreen: "SET_FULL_SCREEN"
    }),
    back() {
      this.setFullScreen(false);
    },
    open() {
      this.setFullScreen(true);
    },
    //动画相关的钩子
    enter(el, done) {
      const { x, y, scale } = this._getPosAndScale();

      const animation = {
        0: {
          transform: `translate3d(${x}px,${y}px,0) scale(${scale})`
        },
        60: {
          transform: `translate3d(0,0,0) scale(1.1)`
        },
        100: {
          transform: `translate3d(0,0,0) scale(1)`
        }
      };

      //注册动画
      animations.registerAnimation({
        name: "move",
        // the actual array of animation changes
        animation,
        // optional presets for when actually running the animation
        presets: {
          duration: 400,
          easing: "linear"
        }
      });

      //运行动画
      // then run it
      animations.runAnimation(this.$refs.cdWrapper, "move", done);
    },
    afterEnter(){
      animations.unregisterAnimation('move')
      this.$refs.cdWrapper.style.animation = ''
    },
    leave(el,done){
      this.$refs.cdWrapper.style.transition = "all 0.4s"
      // el.style[transform] = `translate3d(${x}px,${y}px,0) scale(${scale})`
      // el.addEventListener('transitioned',done)
      const {x,y,scale} = this._getPosAndScale()
      this.$refs.cdWrapper.style[transform] = `translate3d(${x}px,${y}px,0) scale(${scale})`
      // this.$refs.cdWrapper.addEventListener('transitioned',done)
      this.$refs.cdWrapper.addEventListener('transitionend',done)
    },
    afterLeave(){
      this.$refs.cdWrapper.style.transition = ''
      this.$refs.cdWrapper.style[transform] = ''
    },
    _getPosAndScale() {
      const targetWidth = 40; // mini-player 图片的大小
      const paddingLeft = 40; // mini-player 图片距离左边的距离
      const paddingBottom = 30; // mini-player 图片距离底部的距离
      const paddingTop = 80;
      const width = window.innerWidth * 0.8;
      const scale = targetWidth / width;
      const x = -(window.innerWidth / 2 - paddingLeft); // 要移动x的距离
      const y = window.innerHeight - paddingTop - width / 2 - paddingBottom; // 要移动的y的距离

      return { x, y, scale };
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '~common/stylus/variable';
@import '~common/stylus/mixin';

.player {
  .normal-player {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 70;
    background: $color-background;

    &.normal-enter-active, &.normal-leave-active {
      transition: all 0.4s;

      .top, .bottom {
        transition: all 0.4s cubic-bezier(0.86, 0.18, 0.82, 1.32);
      }
    }

    &.normal-enter, &.normal-leave-to {
      opacity: 0;

      .top {
        transform: translate3d(0, -100px, 0);
      }

      .bottom {
        transform: translate3d(0, 100px, 0);
      }
    }

    .background {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      opacity: 0.6;
      filter: blur(20px);
    }

    .top {
      margin-bottom: 25px;
      position: relative;

      .back {
        position: absolute;
        left: 6px;
        top: 0;
        z-index: 75;

        .icon-back {
          display: block;
          padding: 9px;
          font-size: $font-size-large-x;
          color: $color-theme;
          transform: rotate(-90deg);
        }
      }

      .subtitle {
        line-height: 20px;
        text-align: center;
        margin: 0 auto;
        width: 70%;
        font-size: $font-size-medium;
        color: $color-text;
      }

      .title {
        width: 70%;
        line-height: 40px;
        margin: 0 auto;
        text-align: center;
        font-size: $font-size-large;
      }
    }
  }

  .middle {
    position: fixed;
    width: 100%;
    top: 80px;
    bottom: 170px;
    white-space: nowrap;
    font-size: 0;

    .middle-l {
      display: inline-block;
      vertical-align: top;
      width: 100%;
      height: 0;
      padding-top: 80%;
      position: relative;

      .cd-wrapper {
        position: absolute;
        left: 10%;
        top: 0;
        width: 80%;
        height: 100%;

        .cd {
          width: 100%;
          height: 100%;
          box-sizing: border-box;
          border: 10px solid rgba(255, 255, 255, 0.1);
          border-radius: 50%;

          .image {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            border-radius: 50%;
          }
        }
      }
    }
  }

  .bottom {
    bottom: 50px;
    position: absolute;
    width: 100%;

    .operators {
      display: flex;
      align-items: center;
      .icon {
        flex: 1;
        color: $color-theme;

        i {
          font-size: 30px;
        }
      }

      .i-left {
        text-align: right;
      }

      .i-center {
        text-align: center;
        padding: 0 20px;

        i {
          font-size: 40px;
        }
      }

      .i-right {
        text-align: left;

        .icon-not-favorite {
          color: $color-sub-theme;
        }
      }
    }
  }

  .mini-player {
    display: flex;
    align-items: center;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 60px;
    z-index: 80;
    background: $color-highlight-background;

    &.mini-enter-active, &.mini-leave-active {
      transition: all 0.4s;
    }

    &.mini-enter, &.mini-leave-to {
      opacity: 0;
    }

    .icon {
      flex: 0 0 40px;
      width: 40px;
      padding: 0 10px 0 20px;

      img {
        border-radius: 50%;
      }
    }

    .text {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      line-height: 20px;

      .name {
        margin-bottom: 2px;
      }
    }

    font-size: $font-size-medium;

    color $color-text {
      no-wrap();
    }

    .desc {
      font-size: $font-size-small;
      color: $color-text-d;
      no-wrap();
    }

    .control {
      flex: 0 0 30px;
      width: 30px;
      padding: 0 10px;

      .icon-playlist {
        font-size: 30px;
        color: $color-theme-d;
      }
    }
  }
}
</style>

